<template>
  <div class="docker">
    <div
      v-for="(item,index) in dockerList"
      class="docker_item"
      :class="{ docker_item: true, docker_active: index == currentIndex }"
      :key="item.icon"
    >
      <router-link :to="item.to">
        <div :class="item.icon" class="iconfont"></div>
        <div class=" docker__title" >
          {{item.text}}
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "Docker",
  props:['currentIndex'],
  setup() {
    const dockerList = [
      { icon: "icon-shouye", text: "首页", to: { name: "Home" } },
      {
        icon: "icon-gouwuche",
        text: "购物车",
        to: { name: "CartList" },
      },
      { icon: "icon-dingdan", text: "订单", to: { name: "OrderList" } },
      { icon: "icon-wode", text: "我的", to: { name: "PersonalInfo" } },
    ];
    return {
      dockerList,
    };
  },
};
</script>

<style lang="scss" scoped>
.docker {
  width: 100%;
  height: 0.49rem;
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 0 0.18rem;
  box-sizing: border-box;
  border-top: 0.01rem solid #f1f1f1;
  &_item {
    flex: 1;
    text-align: center;
    a {
      color: #333333;
      text-decoration: none;
    }
    .iconfont {
      margin: 0.07rem 0 0.02rem 0;
      font-size: 0.18rem;
    }
  }
  &_active {
    a {
      color: #1fa4fc;
    }
  }
  &__title {
    font-size: 0.2rem;
    transform: scale(0.5, 0.5);
    transform-origin: center top;
  }
}
</style>
